<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in">
      <div class="cornerComment-in-title">
        <span>新增工资信息</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody">
        <el-form label-width="120px" ref="editForm">
          <el-form-item label="工资月份：">
            <el-date-picker
              style="width: 50%;"
              v-model="mouth"
              type="month"
              format="yyyyMM"
              value-format="yyyyMM"
              placeholder="选择月">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="工资模板：">
            <el-select v-model="typeWages" placeholder="请选择工资模板" style="width: 50%;">
              <el-option
                v-for="item in list"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="工资文件：">
            <el-upload
              class="upload-demo"
              drag
              :action="$uploadImg"
              :file-list="fileList"
              :on-success="handleSuccess"
              accept=".xls,.xlsx">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">只能上传excel文件</div>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
      <div class="cornerComment-in-footer">
        <el-button @click.native="closePOpup" size="small">取消</el-button>
        <el-button size="small" type="primary" @click="checkEditFn">确定并保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {
  import_user,
  import_teacher,
  import_life,
  import_kitchen,
  import_askari,
  import_supplement,
  wagesTempList,
  import_
} from "@/api/admin/wages"

export default {
  props: ['visible'], // recruitmentType examine 审核
  components: {},
  data() {
    return {
      dialogVisible: false,
      typeWages: '',
      mouth: '',
      fileList: [],
      list: [
        {
          id: 1,
          name: '编内'
        },
        {
          id: 2,
          name: '编外（外聘教师）'
        },
        {
          id: 3,
          name: '编外（生活老师）'
        },
        {
          id: 4,
          name: '编外（厨房）'
        },
        {
          id: 5,
          name: '编外（保安）'
        },
        {
          id: 6,
          name: '编外（补发）'
        }
      ]
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if(this.visible){
        this.InitFn()
      }
    }
  },
  created() {

  },
  methods: {
    // 工资模板初始化
     InitFn() {
        wagesTempList({
            p: 0
        }).then(res => {
            console.log('res', res)
            this.list = res.list.map((item)=>{
              return {
                id:item.id,
                name:item.name
              }
            })
        })
    },
    checkEditFn() {
      if (!this.mouth) {
        this.$message.error('选择导入月份')
        return
      }
      if (!this.typeWages) {
        this.$message.error('选择导入类型')
        return
      }
      if (!this.fileList.length) {
        this.$message.error('选择导入文件')
        return
      }
      let data_ = {
        file: this.fileList[0].response.data.name,
        month: this.mouth,
        template_id:this.typeWages
      }

      import_(data_).then(res => {
        console.log('res')
        this.resetPage()
        this.closePOpup()
      })
      return
      if (this.typeWages === 1) {
        import_user(data_).then(res => {
          console.log('res')
          this.resetPage()
        })
      } else if (this.typeWages === 2) {
        import_teacher(data_).then(res => {
          console.log('res')
          this.resetPage()
        })
      } else if (this.typeWages === 3) {
        import_life(data_).then(res => {
          console.log('res')
          this.resetPage()
        })
      } else if (this.typeWages === 4) {
        import_kitchen(data_).then(res => {
          console.log('res')
          this.resetPage()
        })
      } else if (this.typeWages === 5) {
        import_askari(data_).then(res => {
          console.log('res')
          this.resetPage()
        })
      } else if (this.typeWages === 6) {
        import_supplement(data_).then(res => {
          console.log('res')
          this.resetPage()
        })
      }
    },
    resetPage() {
      this.$message.success('导入成功')
      this.typeWages = ''
      this.mouth = ''
      this.fileList = []
      this.$emit('InitFn')
    },
    handleSuccess(response, file, fileList) {
      console.log(response, file, fileList)
      this.fileList = fileList
    },
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    }
  },
  mounted() {
  }
}
</script>
<style scoped>
#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 700px;
  height: 550px;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 20px;
  flex: 1;
  overflow-y: auto;
}

.close-Btn-line {
  cursor: pointer;
}

.resruitment-title {
  padding: 5px 0;
  border-bottom: 2px solid #abd3f3;
  margin-bottom: 20px;
}

.el-radio {
  margin-right: 20px;
}

.jobTime {
  display: flex;
  align-items: center;
}

.jobTime span {
  padding: 0 10px;
}
</style>


